<template>
    <el-main>
       <div class="container-fluid" style="height:100%;" >
           <div class="row" style="height:100%;" >
               <div class="col-md-9" style="height:100%;" >
                   <div class="rounded border1 row bgcolorqi1" >
                   <div class="col-md-6 text-center">
                    <img class="rounded img-para img-thumbnail" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2293675559,2668479973&fm=27&gp=0.jpg"  alt="">
                   </div>
                   <div class="col-md-6">
                       <div class="rounded des" >
                           <p class="text-primary">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>
                       </div>
                   </div>
                   <div class="offset-md-4 col-md-4 text-center borer-3 rounded goPractice" @click="goPractice()" >
                            <span>开始练习</span>
                            <img src="@/assets/images/RevokeRight.png" alt="">
                        </div>
                    </div>
                    
               </div>
               <div class="col-md-3" >
                 <div class="rounded float-right text-center imgcneter" >
                       <router-link to="">
                        <img src="@/assets/images/programming.png" width="75" height="75" alt=""  >
                        <br>
                        <span>编程</span>
                        </router-link>
                  </div>
                  <div class="rounded float-right text-center imgcneter" >
                        <router-link to="">
                        <img src="@/assets/images/build.png" width="75" style="margin-top:13px;"  alt=""  >
                        <br>
                        <span>搭建</span>
                        </router-link>
                  </div>
               </div>
           </div>
       </div>
        
    </el-main>
</template>

<script>
export default {
    name: 'classright',
    mounted() {
        let id = this.$route.query.id;
        if (id) {
            
        }
    },
    methods: {
        back () {

        },
        goPractice () {
            let id = this.$route.query.id;
            this.$router.push({path:'/build' , query: {id:id} })
        }
    }
};
</script>


<style scoped>
    .el-main {
        background: url(../../assets/images/dbdkbg.jpg);
        background-repeat: no-repeat;
        background-size: 100%;
        
    }
    .border1 {
        color: #fff;
        height: 100%;
        border: 5px solid #fff;
    }
    .img-para {
        margin-top: 35px;
        
    }
    .des {
        margin-right: 20px;
        margin-top: 35px;
        border: 5px solid #fff;
        padding: 5px;
    }
    .borer-3 {
        border: 2px solid #fff;
        height: 120px;
        padding: 7px;
        color: #000;
        line-height: 106px;
        font-size: 24px;
    }
    .imgcenter {
        width: 90px;
        padding: 7px;
    }
    .goPractice {
        cursor: pointer;
    }
    .goPractice:hover {
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        background-color: #17a2b8!important;
    }
</style>